<template>
  <el-drawer v-bind="$attrs" v-on="$listeners" ref="previewDrawer" size="50%">
    <span slot="title"
      ><i class="el-icon-date" style="margin-right: 6px"></i><b>表单预览</b></span
    >
    <div style="height: calc(100%-46px)">
      <el-row :style="rowStyle">
        <el-col :md="24" :lg="24" class="colStyle">
          <el-form
            :rules="rules"
            :ref="formConf.formModel"
            :size="formConf.size"
            :model="form"
            :label-position="formConf.labelPosition"
            :disabled="formConf.disabled"
            :validate-on-rule-change="false"
            :gutter="formConf.gutter"
            label-width="formConf.labelWidth + 'px'"
          >
            <template v-for="(element, index) in list">
              <!-- <el-input v-model="element.id" placeholder=""></el-input> -->
              <preview-row-item
                v-if="element.compType === 'row'"
                :key="'row-' + index"
                :model="element"
              >
                <el-col
                  v-for="column in element.columns"
                  :key="column.index"
                  :span="column.span"
                >
                  <template v-for="col in column.list">
                    <preview-item
                      v-if="col.compType !== 'dynamicTable'"
                      :key="col.id"
                      :model="col"
                      v-model="form[col.id]"
                      @valChange="handlerValChange"
                    />
                    <fancy-dynamic-table
                      v-else-if="col.compType === 'dynamicTable'"
                      ref="dynamicTable"
                      :key="'dynamic-' + index"
                      :data="form[col.id]"
                      :conf="col"
                      @addRow="handlerAddRow"
                      @deleteRow="handlerDeleteRow"
                      @batchDeleteRow="handlerBatchDeleteRow"
                    >
                      <template v-slot:item="{ rowScope, item }">
                        <fancy-dynamic-table-item
                          :model="item"
                          :parent="col"
                          :key="'tableIndex-' + rowScope.$index"
                          :index="rowScope.$index"
                          v-model="rowScope.row[item.id]"
                          @valChange="handlerDynamicValChange"
                        />
                      </template>
                    </fancy-dynamic-table>
                  </template>
                </el-col>
              </preview-row-item>
              <fancy-dynamic-table
                v-else-if="element.compType === 'dynamicTable'"
                :key="'dynamic-' + index"
                :data="form[element.id]"
                :ref="element.id"
                :conf="element"
                @addRow="handlerAddRow"
                @deleteRow="handlerDeleteRow"
                @batchDeleteRow="handlerBatchDeleteRow"
              >
                <template v-slot:item="{ rowScope, item }">
                  <fancy-dynamic-table-item
                    :model="item"
                    :ref="item.id + rowScope.$index"
                    :parent="element"
                    :key="'tableIndex-' + rowScope.$index"
                    :index="rowScope.$index"
                    v-model="rowScope.row[item.id]"
                    @valChange="handlerDynamicValChange"
                  />
                </template>
              </fancy-dynamic-table>
              <fancy-edit-table
                v-else-if="element.compType === 'table'"
                :layoutArray="element.layoutArray"
                :tdStyle="element.tdStyle"
                :align="element.align"
                :valign="element.valign"
                :width="element.width"
                :height="element.height"
                :border="element.border"
                :borderCollapse="element.borderCollapse"
                :borderColor="element.borderColor"
                :cellpadding="element.cellpadding"
                :cellspacing="element.cellspacing"
              >
                <template v-slot="{ td }">
                  <template v-for="col in td.columns">
                    <preview-item
                      :model="col"
                      v-model="form[col.id]"
                      @valChange="handlerValChange"
                    />
                  </template>
                </template>
              </fancy-edit-table>
              <!--item-->
              <el-col class="drag-col-wrapper" :key="index" :span="element.span" v-else>
                <preview-item
                  :model="element"
                  v-model="form[element.id]"
                  @valChange="handlerValChange"
                />
              </el-col>
            </template>
          </el-form>
        </el-col>
      </el-row>
    </div>
    <div style="float: left; margin-left: 10px">
      <el-button
        type="primary"
        @click="handlerSubForm"
        size="mini"
        style="width: 180px; margin-top: 10px"
        >提交</el-button
      >
      <el-button @click="cancelSubForm" size="mini" style="width: 180px; margin-top: 10px"
        >取消</el-button
      >
    </div>
  </el-drawer>
</template>

<script>
import previewItem from "./preview-item";
import previewRowItem from "./preview-row-item";
import fancyEditTable from "./table/fancyEditTable";
import fancyDynamicTable from "./dynamic/fancyDynamicTable";
import fancyDynamicTableItem from "./dynamic/fancyDynamicTableItem";
import { datas, addRow, deleteRow, batchDeleteRow } from "./custom/formDraw";

export default {
  name: "preview",
  props: ["itemList", "formConf"],
  components: {
    previewItem,
    previewRowItem,
    fancyEditTable,
    fancyDynamicTable,
    fancyDynamicTableItem,
  },
  data() {
    return {
      list: this.itemList,
      form: {},
      rules: {},
      currentIndex: -1,
    };
  },
  methods: {
    handlerValChange(key, origin) {
      this.$set(this.form, key, origin);
    },
    handlerDynamicValChange(parentId, index, key, origin) {
      this.$set(this.form[parentId][index], key, origin);
      this.currentIndex = index;
    },
    handlerSubForm() {
      this.$refs[this.formConf.formModel].validate((valid) => {
        if (valid) {
          this.$message.success("success");
        }
      });
    },
    cancelSubForm() {
      this.$refs.previewDrawer.closeDrawer();
    },
    handlerAddRow: addRow,
    handlerInitDatas: datas,
    handlerDeleteRow: deleteRow,
    handlerBatchDeleteRow: batchDeleteRow,
  },
  created() {
    this.handlerInitDatas(); //初始化表单
  },
  mounted() {
    this.$nextTick(() => {});
  },
  beforeCreate() {},
  computed: {
    rowStyle() {
      const ht = document.body.clientHeight;
      const wt = document.body.clientWidth;
      return (
        "height:" +
        (ht - 108) +
        "px;width:" +
        wt / 2 +
        "px;overflow-x:hidden;overflow-y:auto;"
      );
    },
  },
};
</script>
<style lang="scss" scoped>
.colStyle {
  padding: 20px 20px 20px 20px;
  height: 100%;
  border: 1px solid #e0e0e0;
  overflow-x: hidden;
  overflow-y: auto;
}
.el-drawer__header {
  padding: 20px 0px 0px 0px;
}
.preview >>> .el-form-item {
  margin-bottom: 15px;
}
</style>
